<template>
  <!-- page: Home -->
  <div class = "home-page">
    <section class = "py-5 text-center container">
      <div class = "row py-lg-5">
        <div class = "col-lg-6 col-md-8 mx-auto">
          <img class = "w-50" src = "../assets/images/callout.svg" alt = "callout" />
          <h2 class = "font-weight-light">随心写作，自由表达</h2>
          <p>
            <router-link to="/create" class = "btn btn-primary my-2">开始写文章</router-link>
          </p>
        </div>
      </div>
    </section>
    <h4 class = "font-weight-bold text-center">发现精彩</h4>
    <column-list v-bind:list="list" />
    <button
      class = "btn-more btn btn-outline-primary mt-2 mb-5 mx-auto btn-block w-25"
      v-on:click="loadMorePage"
      v-if="!LastPage"
    >加载更多</button>
  </div>
</template>

<script lang = "ts">
import { defineComponent, computed, onMounted } from 'vue'
// 导入 vuex
import { useStore } from 'vuex'
// 导入 组件
import ColumnList from '@/components/ColumnList.vue'
// 翻页
import useLoadMore from '@/hooks/useLoadMore'
// 导入 数据
import { GlobalDataProps } from '@/assets/js/store'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  // 页面名称
  name: 'Home',
  // 注册组件
  components: {
    ColumnList
  },

  // 组合式api入口
  setup () {
    // stote
    const store = useStore<GlobalDataProps>()
    // total
    const total = computed(() => store.state.columns.total)
    // currentPage
    const currentPage = computed(() => store.state.columns.currentPage)
    // 组件挂载时触发的函数
    onMounted(() => {
      // 调用从服务器异步来的数据 - fetchColumns
      store.dispatch('fetchColumns', { pageSize: 3 })
    })
    // 专栏列表数据
    const list = computed(() => store.getters.getColumns)
    const { loadMorePage, isLastPage } = useLoadMore('fetchColumns', total, { pageSize: 3, currentPage: (currentPage.value ? currentPage.value + 1 : 2) })
    return {
      list,
      loadMorePage,
      isLastPage
    }
  }
})
</script>

<style lang="css" scoped>
.font-weight-light{
  font-size: 1.5rem;
  margin-top: 3rem;
}
.btn-more{
  display: block;
}
</style>
